<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="popup_sidebar.css">
    <script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="popup_sidebar.js"></script>
</head>

<body>
    <div id="popup_sidebar_demo"></div>
    <div id="popup_sidebar_demo2"></div>
    <div id="popup_sidebar_demo3"></div>
    <div id="popup_sidebar_demo4"></div>
    <button id="test" class="popupbtn">左弹出</button>
    <button id="test2" class="popupbtn">右弹出</button>
    <button id="test3" class="popupbtn">上弹出</button>
    <button id="test4" class="popupbtn">下弹出</button>
    <button id="test5" class="popupbtn">关闭弹窗</button>
    <script>
        var data = {
            //弹窗组件生成区域 div id
            id: "popup_sidebar_demo",
            //弹窗方向，左边，右边，下边，上边
            direction: 'left',
            //弹窗宽度 （请带单位，px vw）
            width: '30vw',
            //弹窗高度（请带单位，px vh）
            height: '100vh',
            //手机显示设置
            phone_width:'',
            //弹窗样式
            style: 'z-index:9999;box-shadow:4px 4px 5px #999;background-color: rgb(138, 59, 59);opacity: 1;color: #fff;border-top-right-radius: 25px;border-bottom-right-radius: 25px;',
            //关闭按钮样式
            close_style: `margin:5px;`,
            //弹窗内容
            content: `
                    <h1 style="margin-top:40px;">hello,word! <br>左边出来</h1>
                `,
            callback: {
                //点击事件
                click: function (res) {
                    console.log(res);
                },
                //点击弹窗外事件
                click_out_popup_sidebar: function (res) {
                    console.log(res);
                },
                //点击关闭弹窗事件
                click_close_popup_sidebar: function (res) {
                    console.log(res);
                }
            }
        };
        var popup_sidebar_demo = new popup_sidebar();
        popup_sidebar_demo.init(data);
        var data = {
            //弹窗组件生成区域 div id
            id: "popup_sidebar_demo2",
            //弹窗方向，左边，右边，下边，上边
            direction: 'right',
            //弹窗宽度 （请带单位，px vw）
            width: '50vw',
            //弹窗高度（请带单位，px vh）
            height: '100vh',
            //弹窗内容
            content: `
                    <h1>hello,word! 右边出来</h1>
                `,
            callback: {
                //点击事件
                click: function (res) {
                    console.log(res);
                },
                //点击弹窗外事件
                click_out_popup_sidebar: function (res) {
                    console.log(res);
                },
                //点击关闭弹窗事件
                click_close_popup_sidebar: function (res) {
                    console.log(res);
                }
            }
        };
        var popup_sidebar_demo2 = new popup_sidebar();
        popup_sidebar_demo2.init(data);
        var data = {
            //弹窗组件生成区域 div id
            id: "popup_sidebar_demo3",
            //弹窗方向，左边，右边，下边，上边
            direction: 'top',
            //弹窗内容
            content: `
                    <h1>hello,word! 顶部出来</h1>
                `,
            callback: {
                //点击事件
                click: function (res) {
                    console.log(res);
                },
                //点击弹窗外事件
                click_out_popup_sidebar: function (res) {
                    console.log(res);
                },
                //点击关闭弹窗事件
                click_close_popup_sidebar: function (res) {
                    console.log(res);
                }
            }
        };
        var popup_sidebar_demo3 = new popup_sidebar();
        popup_sidebar_demo3.init(data);
        var data = {
            //弹窗组件生成区域 div id
            id: "popup_sidebar_demo4",
            //弹窗方向，左边，右边，下边，上边
            direction: 'bottom',
            //弹窗内容
            content: `
                    <h1>hello,word! 底部出来</h1>
                `,
            callback: {
                //点击事件
                click: function (res) {
                    console.log(res);
                },
                //点击弹窗外事件
                click_out_popup_sidebar: function (res) {
                    console.log(res);
                },
                //点击关闭弹窗事件
                click_close_popup_sidebar: function (res) {
                    console.log(res);
                }
            }
        };
        var popup_sidebar_demo4 = new popup_sidebar();
        popup_sidebar_demo4.init(data);
        $('#test').click(function (event) {
            popup_sidebar_demo.popup()
        });
        $('#test2').click(function (event) {
            popup_sidebar_demo2.popup()
        });
        $('#test3').click(function (event) {
            //弹窗的时候可以定义 N秒后自动收回
            popup_sidebar_demo3.popup()
        });
        $('#test4').click(function (event) {
            popup_sidebar_demo4.popup()
        });
        $('#test5').click(function (event) {
            //弹窗失去焦点都会关闭
            popup_sidebar_demo4.close()
        });
    </script>
</body>

</html>